<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: cwh
 * @LastEditTime: 2022-01-07 19:03:47
-->
<template>
  <div ref="right1_container" style="height: 95%"></div>
</template>
<script>
import { DualAxes} from '@antv/g2plot'
export default {
  data(){
    return{
      dataArr:[
        { year: '1991',value: 7,   count: 10},
        { year: '1992',value: 5,   count: 4},
        { year: '1993',value: 3.5 , count: 15},
        { year: '1994',value: 2,    count: 6},
        { year: '1995',value: 4.9,  count: 4.9},
        { year: '1996',value: 6 ,   count: 35}
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){
      const dualAxes = new DualAxes(this.$refs.right1_container,{
        data:[this.dataArr,this.dataArr],
        xField:'year',
        yField:['value','count'],
        geometryOptions: [{
            geometry:'line',
            color:'#5B8FF9'
          },
            {geometry:'line',
            color:'#5AD8A6'
          },
        ],
      })
      dualAxes.render()
    }
  }
}
</script>
